<template>
  <div class="home">
    <img alt="Vue logo" @click="clickfn" src="../assets/logo.png" />
    <div class="borderWrap">
      <h5>父组件内容</h5>
      <p>mixins-1数据:{{mixinData}}</p>
      <p>mixins-2数据:{{mixinDataTwo}}</p>
      <p>父组件data:{{myData}}</p>
      <p><button @click="getRef">点击调用自组件方法-ref</button></p>
    </div>
    <HelloWorld ref="HelloWorld" msg="Welcome to Your Vue.js + TypeScript App" :msg2="msg" @subClick="subClick"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Mixins } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import mixinOne from '../mixins';
import mixinTwo from '../mixins2';

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Mixins(mixinOne, mixinTwo) {
  public $refs!: {
    HelloWorld: HelloWorld,
  };
  private myData?: string;
  private msg?: string = 'prop msg';
  public data() {
    return {
      myData: 'asda',
    };
  }
  public created() {
    this.myData = 'asdada';
    console.log('created');
  }
  public mounted() {
    this.myData = '1213131';
    console.log('mounted');
  }

  // method 方法使用 private定义
  private clickfn() {
    console.log('======');
  }

  private subClick(data: string) {
    alert('sub click === 入参数: ' + data);
  }

  private getRef(): void {
    this.$refs.HelloWorld.refFn();
    // if (!!this.$refs.HelloWorld ) {
    //   this.$refs.HelloWorld.subClick();
    // }
    // console.log(.refFn());
  }
}
</script>
<style scoped>
.borderWrap{
  padding: 20px;
  border: 1px solid #ccc;
}
</style>
